﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s4/s4-bg.jpg');
            background-repeat: no-repeat;
            overflow: hidden;
        }
        text {
            font: 10px sans-serif;
            text-anchor: middle;
            fill: white;
        }

    </style >
    <script src="./assets/echarts.min.js"></script>
    <script src="./assets/world.js"></script>
    <script src="./assets/d3.v4.min.js"></script>
    <script src="./assets/jquery.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode.event.local.js"></script>
</head>
<body>
    <canvas id="cavans2" style="position:absolute;top:0px; left:0px;" width='1920' height='380'></canvas>
    <div id="container" style="position: absolute; top: 0px; left: 0px;  width:1920px; height:1080px;"></div>
    <img src="./images/s4/s4-left-bg.png" style="position: absolute; top:130px; left: 20px;" />
    <!--<img src="./images/s4/s4-right-bg.png" style="position: absolute; top:130px; left: 1500px;" />-->
    <script src="./content/s0-charts.js"></script>
    <script src="./content/s0-event.js"></script>
    <script src="./content/jzcode.sinotrans.js"></script>
    <script>

        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        app.title = '65k+ 飞机航线';

        myChart.showLoading();

        var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

        var color = ['#a6c84c', '#ffa022', '#46bee9'];
        var effect = {
            show: true,
            scaleSize: 3,
            period: 20,             // 运动周期，无单位，值越大越慢
            symbol: planePath,
            color: '#fff',
            shadowColor: 'rgba(220,220,220,0.4)',
            shadowBlur: 5
        };
        function itemStyle(idx) {
            return {
                normal: {
                    color: '#fff',
                    borderWidth: 1,
                    borderColor: ['rgba(30,144,255,1)', 'lime'][idx],
                    lineStyle: {
                        //shadowColor : ['rgba(30,144,255,1)','lime'][idx], //默认透明
                        //shadowBlur: 10,
                        //shadowOffsetX: 0,
                        //shadowOffsetY: 0,
                        type: 'solid'
                    }
                }
            }
        };

        $.get(jzcode.data.getUrl('data/data-s4-airline.json'), function (data) {
                myChart.hideLoading();

                var geoCoordMap = data.coordMap;
                var geoLinks = data.links;

                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var dataItem = data[i];
                        var fromCoord = geoCoordMap[dataItem[0].name];
                        var toCoord = geoCoordMap[dataItem[1].name];
                        if (fromCoord && toCoord) {
                            res.push({
                                fromName: dataItem[0].name,
                                toName: dataItem[1].name,
                                coords: [fromCoord, toCoord]
                            });
                        }
                    }
                    return res;
                };

                var convertCityData = function () {
                    var res = [];
                    for (var i in geoCoordMap) {
                        var showName = false;
                        for (var iLink = 0; iLink < geoLinks.length; iLink++) {
                            if (geoLinks[iLink][1].name == i) {
                                showName = true;
                                break;
                            }
                        }

                        if (showName) {
                            res.push({
                                name: i,
                                value: geoCoordMap[i].concat(100)
                            });
                        } else {
                            res.push({
                                name: '',
                                value: geoCoordMap[i].concat(100)
                            });
                        }
                    }
                    return res;
                }
                var convertProjectData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var dataItem = data[i];
                        var fromCoord = geoCoordMap[dataItem[0].name];
                        var toCoord = geoCoordMap[dataItem[1].name];
                        if (fromCoord && toCoord) {
                            res.push({
                                fromName: dataItem[0].name,
                                toName: dataItem[1].name,
                                coords: [fromCoord, toCoord]
                            });
                        }
                    }
                    return res;
                };

                myChart.setOption(option = {
                    title: [{
                        text: '',
                        x: 85,
                        y: 600,
                        textAlign: 'left',
                        textStyle: {
                            color: 'white',
                            fontSize: 24
                        }
                    }],
                    //backgroundColor: '#003',
                    tooltip: {
                        formatter: function (param) {
                            var route = data.routes[param.dataIndex];
                            return data.airports[route[1]][1] + ' > ' + data.airports[route[2]][1];
                        }
                    },
                    graphic:{
                        elements: [{
                            type: 'image',
                            left: 1490,
                            top:130,
                            style: {
                                image: './images/s4/s4-right-bg.png'
                            }
                        }]
                    },
                    geo: {
                        map: 'world',
                        left: 250,
                        top: 250,
                        right: 250,
                        bottom: 150,
                        silent: true,
                        itemStyle: {
                            normal: {
                                borderColor: '#003',
                                color: 'rgb(105,182,223)'
                            }
                        }
                    },
                    series: [{
                        name: '项目',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'bottom',
                                formatter: '{b}',
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        symbolSize: function (val) {
                            return val[2] / 8;
                        },
                        itemStyle: {
                            normal: {
                                color: '#f00'
                            }
                        },
                        data: convertCityData()
                    }, {
                        name: 'project',
                        type: 'lines',
                        zlevel: 2,
                        symbol: ['circle', 'circle'],
                        symbolSize: 10,
                        effect: {
                            show: true,
                            period: 6,
                            trailLength: 0,
                            symbol: planePath,
                            symbolSize: 32,
                            color:'#fff'
                        },
                        lineStyle: {
                            normal: {
                                color: '#226622',
                                width: 1,
                                opacity: 0.6,
                                curveness: 0.2
                            }
                        },
                        data: convertProjectData(geoLinks)
                    },
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: 75,
                        center: [1680, 300],
                        data: [
                            {
                                value: 107078938.52, name: '间接客户',
                                itemStyle: {
                                    normal: {
                                        color:'rgb(66,215,63)'
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        lineStyle: {
                                            width:3
                                        }
                                    }
                                },
                                label: {
                                    normal: {
                                        textStyle:{color:'#fff'}
                                    }
                                }
                            },
                            {
                                value: 70773609.03, name: '现结客户',
                                itemStyle: {
                                    normal: {
                                        color: 'rgb(254,173,5)'
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        lineStyle: {
                                            width: 3
                                        }
                                    }
                                },
                                label: {
                                    normal: {
                                        textStyle: { color: '#fff' }
                                    }
                                }
                            },
                            {
                                value: 70007905.25, name: '直接客户',
                                itemStyle: {
                                    normal: {
                                        color: 'rgb(255,67,0)'
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        lineStyle: {
                                            width: 3
                                        }
                                    }
                                },
                                label: {
                                    normal: {
                                        textStyle: { color: '#fff' }
                                    }
                                }
                            }
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }, {
                        name: '访问来源',
                        type: 'pie',
                        radius: 75,
                        center: [1680, 300],
                        data: [
                            {
                                value: 107078938.52, name: '间接客户',
                                itemStyle: {
                                    normal: {
                                        color: 'rgb(66,215,63)'
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        lineStyle: {
                                            width: 3
                                        }
                                    }
                                },
                                label: {
                                    normal: {
                                        position: 'inner',
                                        formatter: '{d}%',
                                        textStyle: { color: '#fff' }
                                    }
                                }
                            },
                            {
                                value: 70773609.03, name: '现结客户',
                                itemStyle: {
                                    normal: {
                                        color: 'rgb(254,173,5)'
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        lineStyle: {
                                            width: 3
                                        }
                                    }
                                },
                                label: {
                                    normal: {
                                        position: 'inner',
                                        formatter: '{d}%',
                                        textStyle: { color: '#fff' }
                                    }
                                }
                            },
                            {
                                value: 70007905.25, name: '直接客户',
                                itemStyle: {
                                    normal: {
                                        color: 'rgb(255,67,0)'
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        lineStyle: {
                                            width: 3
                                        }
                                    }
                                },
                                label: {
                                    normal: {
                                        position: 'inner',
                                        formatter: '{d}%',
                                        textStyle: { color: '#fff' }
                                    }
                                }
                            }
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                });
        }, 'json');
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

        var _cxt = null;
        var g_interval = 30;
        var g_size = { w: 1920, h: 300 };
        function init() {
            _cxt = document.getElementById('cavans2').getContext("2d");
            window.setInterval(function () {
                Render();
            }, g_interval);
        }

        function Render() {
            _cxt.clearRect(0, 0, g_size.w, g_size.h);

            _cxt.textBaseline = 'top';
            _cxt.fillStyle = '#FFF';
            _cxt.font = '40px Arial';
            var timeString = getNowFormatYYMMDDHHMM();
            var timeLength = _cxt.measureText(timeString);
            _cxt.fillText(timeString, 1920 - timeLength.width - 50, 40);
        }

        function getNowFormatYYMMDDHHMM() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            var strHour = date.getHours();
            var strMinutes = date.getMinutes();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            if (strHour >= 0 && strHour <= 9) {
                strHour = "0" + strHour;
            }
            if (strMinutes >= 0 && strMinutes <= 9) {
                strMinutes = "0" + strMinutes;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + strHour + seperator2 + strMinutes;
            return currentdate;
        }
        init();
    </script>
    <script>
        $(document).ready(function () {
            register();
        });
    </script>
</body>
</html>